<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>时钟</title>
  <style type="text/css">
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background-position: top;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
}
.svg-clock {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 70vmin;
  height: 70vmin;
  opacity: 0.9;
  fill: none;
  flex: 0 0 40%;
  transform: rotate(-90deg);
  --start-hours: 2;
  --start-minutes: 55;
  --start-seconds: 30;
  --color-seconds: #d11;
  --color-base: rgba(255,255,255,0.9);
  --color-ticks: var(--color-base);
  --color-text: rgba(255,255,255,0.9);
  --date-string: '2019©CLosk™';
  stroke: var(--color-base);
  stroke-width: 0;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px 1px rgba(0,0,0,0.7));
}
.svg-clock .text,
.svg-clock .tzone {
  font-size: 1.8px;
  font-family: sans-serif;
  transform: translate(9px, 9px) rotate(90deg);
  fill: var(--color-text);
  stroke: none;
}
.svg-clock .tzone {
  transform: translate(29px, 12px) rotate(90deg);
}
.svg-clock .marks {
  transform: translate(20px, 20px);
  stroke-width: 0.2;
  stroke: var(--color-ticks);
}
.svg-clock .marks > :nth-child(1) {
  transform: rotate(30deg);
}
.svg-clock .marks > :nth-child(2) {
  transform: rotate(60deg);
}
.svg-clock .marks > :nth-child(3) {
  transform: rotate(90deg);
  stroke-width: 0.5;
}
.svg-clock .marks > :nth-child(4) {
  transform: rotate(120deg);
}
.svg-clock .marks > :nth-child(5) {
  transform: rotate(150deg);
}
.svg-clock .marks > :nth-child(6) {
  transform: rotate(180deg);
  stroke-width: 0.5;
}
.svg-clock .marks > :nth-child(7) {
  transform: rotate(210deg);
}
.svg-clock .marks > :nth-child(8) {
  transform: rotate(240deg);
}
.svg-clock .marks > :nth-child(9) {
  transform: rotate(270deg);
  stroke-width: 0.5;
}
.svg-clock .marks > :nth-child(10) {
  transform: rotate(300deg);
}
.svg-clock .marks > :nth-child(11) {
  transform: rotate(330deg);
}
.svg-clock .marks > :nth-child(12) {
  transform: rotate(360deg);
  stroke-width: 0.5;
}
.svg-clock .seconds,
.svg-clock .minute,
.svg-clock .hour {
  transform: translate(20px, 20px) rotate(0deg);
}
.svg-clock .hour {
  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
  animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;
  animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
  stroke-width: 1;
}
.svg-clock .minute {
  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
  animation: rotateMinuteHand 3600s steps(60) infinite;
  animation-delay: calc(var(--start-seconds) * -1 * 1s);
  stroke-width: 0.6;
}
.svg-clock .seconds {
  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
  animation: rotateSecondsHand 60s steps(60) infinite;
  stroke-width: 0.3;
  stroke: var(--color-seconds);
}
.svg-clock .pin {
  fill: var(--color-base);
  stroke: var(--color-seconds);
  stroke-width: 0.3;
}
@-moz-keyframes rotateSecondsHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg + 360deg));
  }
}
@-webkit-keyframes rotateSecondsHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg + 360deg));
  }
}
@-o-keyframes rotateSecondsHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg + 360deg));
  }
}
@keyframes rotateSecondsHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg + 360deg));
  }
}
@-moz-keyframes rotateMinuteHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));
  }
}
@-webkit-keyframes rotateMinuteHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));
  }
}
@-o-keyframes rotateMinuteHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));
  }
}
@keyframes rotateMinuteHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));
  }
}
@-moz-keyframes rotateHourHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));
  }
}
@-webkit-keyframes rotateHourHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));
  }
}
@-o-keyframes rotateHourHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));
  }
}
@keyframes rotateHourHand {
  from {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
  }
  to {
    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));
  }
}
@-moz-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(-360deg);
  }
}
@-webkit-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(-360deg);
  }
}
@-o-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(-360deg);
  }
}
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(-360deg);
  }
}
</style>
</head>

<body>

<svg class="svg-clock" viewBox="0 0 40 40" lang="EN" tz="America/Los_Angeles" showtz="showtz" style="
        --color-seconds:orange;
        --color-base: #08d;
        --color-text: skyblue;
        --color-ticks: orange;
        ;">
  <circle class="plate" cx="20" cy="20" r="19"></circle>
  <g class="marks">
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
    <line x1="16.7" y1="0" x2="17" y2="0"></line>
  </g>
  <text class="tzone" x="0" y="0" textLength="16px"></text>
  <text class="text" x="0" y="0" textLength="22px"></text>
  <line class="hour" x1="0" y1="0" x2="9" y2="0"></line>
  <line class="minute" x1="0" y1="0" x2="15" y2="0"></line>
  <line class="seconds" x1="0" y1="0" x2="19" y2="0"></line>
  <circle class="pin" cx="20" cy="20" r="0.7"></circle>
</svg>
  
  

    <script>
        const dateOptions = {day: "numeric", month: "long", weekday: "short"}

function getCurrentTime(timeZone) {
    if (!timeZone)
        return new Date()
    else 
        return new Date((new Date).toLocaleString('en-US', {timeZone}));
}

      
document.querySelectorAll('.svg-clock').forEach( function (svgClock) {
    const timeZone = svgClock.getAttribute('tz');
    const currentTime = getCurrentTime(timeZone);
    svgClock.style.setProperty('--start-seconds', currentTime.getSeconds());
    svgClock.style.setProperty('--start-minutes', currentTime.getMinutes());
    svgClock.style.setProperty('--start-hours', currentTime.getHours() % 12);

    const lang = svgClock.getAttribute('lang') || '';
    const dateString =  currentTime
        .toLocaleString(lang, dateOptions)
        .replace(/[.,]/g,'')
        .toUpperCase();
    svgClock.querySelector('.text').textContent = dateString;
    
    // let timeZoneLabel = timeZone || currentTime.toLocaleString(lang, {timeZoneName: 'short'});
    if (svgClock.hasAttribute('showtz') && timeZone) {
        svgClock.querySelector('.tzone').textContent = timeZone.replace('_',' ').replace(/^.*?\//,'');
    }
});
    </script>




</body>

</html>
